CASE STUDY: STREAMSENSE – TWITCH TOOL
INTRODUCTION
StreamSense – A Twitch Game Analytics Tool

Role: UX/UI Designer & Front-End Developer & Back-End Development
Tools: HTML, CSS, JavaScript, Firebase, Twitch API
Timeframe: April 2025
Focus: Real-time data display, responsive UI, viewer-to-streamer ratio analysis

PROBLEM
The Challenge
Helping Streamers Stand Out with Smarter Game Choices
The Problem

New and growing streamers often struggle to find discoverable games on Twitch. While popular titles attract high viewership, they’re overcrowded with thousands of streamers, reducing visibility.

Why It Matters

Twitch doesn’t offer a native way to compare viewer demand against competition. Existing tools are either too complex, outdated, or not mobile-friendly — making discovery a frustrating process.

SOLUTION
What I Created

StreamSense is a tool designed to help Twitch streamers make smarter decisions by displaying the real-time viewer-to-streamer ratio for top games.

Key Features

• Live search bar for specific games
• Toggle to only show “good games” with favourable ratios
• Game cards showing: total streams, average views, and top stream title
• Smooth skeleton loaders for better UX during fetch
• Responsive, accessible layout across all devices

PROCESS
My Approach
1. Research & Ideation

I spoke with my client (a Twitch streamer) about their discovery challenges. We identified a need for real-time data that showed demand vs. competition. I also analysed Twitch’s interface and tools like SullyGnome and TwitchTracker for gaps in usability.

2. Design & Structure

I used a card-based UI to clearly present game metrics. The layout was responsive, with consistent spacing and a strong visual rhythm. A skeleton loading state was included to reduce perceived wait time.

3. Development

I used the Twitch API to fetch live game data. Backend logic (via Firebase Cloud Functions) calculated viewer-to-streamer ratios. The front end was developed in HTML, CSS, and JS — built for future scalability.

4. Testing & Feedback

I tested across desktop and mobile. Feedback on spacing and visual hierarchy led to improvements in card layout, mobile responsiveness, and search result clarity.

OUTCOME
Final Result
Empowering Streamers with Smart Data
Results

StreamSense empowers streamers to choose games that offer better visibility without high competition. The clean UI and real-time metrics allow for quick, informed decisions before going live.

Skills Shown

• UX Research
• UI Design
• Front-end development with HTML/CSS/JS
• Firebase Functions for backend logic
• API Integration (Twitch)
• Responsive design & performance optimization

REFLECTION
What I Learned
Tight Scope, Real Value
Project Takeaways

StreamSense showed me how small tools can deliver high impact when they’re solving a real need. It deepened my understanding of designing with live data, balancing visual clarity with functionality, and building interfaces that empower users.